<template>
  <section>
    <header>
      <h1>todos</h1>
      <input autofocus autocomplete="off" placeholder="Wwhat need to be done?" v-model="newTodo" @keyup.enter="addTodo">
    </header>
    <section class="main" v-show="todos.length">
      <input type="checkbox" v-model="allDone">
      <ul>
        <li v-for="todo in filteredTodos" :key="todo.id" :class="{completed:todo.completed,editing:todo===editTodo}">
          <div class="view">
            <input class="toggle" type="checkbox" v-model="todo.completed">
            <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
            <button class="destroy" @click="removeTodo(todo)"></button>
          </div>
          <input class="edit" type="text" v-model="todo.title" @blur="doneExit(todo)" @keyup.enter="doneExit(todo)" @keyup.esc="cancelEdit(todo)">
        </li>
      </ul>
    </section>
    <footer class="footer" v-show="todos.length">
      <span class="todo-count">
        <strong>{{remaining}}</strong>{{remaining|pluralize}} left
      </span>
      <ul class="filters">
        <li>
          <a @click="visibility='all'" :class="{selected:visibility==='all'}">All</a>
        </li>
        <li>
          <a @click="visibility='active'" :class="{selected:visibility==='active'}">Active</a>
        </li>
        <li>
          <a @click="visibility='completed'" :class="{selected:visibility==='completed'}">Completed</a>
        </li>
        <button class="clear-computed" @click="removeCompleted" v-show="todos.length>remaining">Clear completed</button>
      </ul>
    </footer>
  </section>
</template>
<script>
  const STORAGE_KEY = 'todo-vuejs-2.0'
  const todoStorage = {
    fetch() {
      const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
      todos.forEach((todo, index) => {
        todo.id = index
      })
      todoStorage.uid = todos.length
      return todos
    },
    save(todos) {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
    }
  }
  const filters = {
    all(todos) {
      return todos
    },
    active(todos) {
      return todos.filter(todo => {
        return !todos.completed
      })
    },
    completed(todos) {
      return todos.filter(todo => {
        return todos.completed
      })
    }
  }
  export default {
    data() {
      return {
        todos: todoStorage.fetch(),
        newTodo: '',
        editTodo: null,
        visibility: 'all'
      }
    },
    computed: {
      filteredTodos() {
        return filters[this.visibility](this.todos)
      },
      remaining() {
        return filters.active(this.todos).length
      },
      allDone: {
        get() {
          return this.remaining === 0
        },
        set(value) {
          this.todos.forEach(todo => {
            todo.completed = value
          })
        }
      }
    },
    filters: {
      pluralize(n) {
        return n === 1 ? 'item' : 'items'
      }
    },
    methods: {
      addTodo() {
        const value = this.newTodo && this.newTodo.trim()
        if (!value) {
          return
        }
        this.todos.push({
          id: todoStorage.uid++,
          title: value,
          completed: false
        })
        this.newTodo = ''
      },
      removeTodo(todo) {
        this.todos.splice(this.todos.indexOf(todo), 1)
      },
      editTodo(todo) {
        this.beforeEditCache = todo.title
        this.editTodo = todo
      },
      doneExit(todo) {
        if (!this.editTodo) { return }
        this.editTodo = null
        todo.title = todo.title.trim()
        if (!todo.title) {
          this.removeTodo(todo)
        }
      },
      cancelEdit(todo) {
        this.eidtedTodo = null
        todo.title = this.beforeEditCache
      },
      removeCompleted() {
        this.todos = filters.active(this.todos)
      }
    },
    directives: {
      'todo-focus'(el, binding) {
        if (binding.value) {
          el.focus()
        }
      }
    }
  }

</script>
